<template>
	<div class="app-container">
	  <el-form class="container-search" :inline="true" :model="form">
		<el-form-item label="产品名称">
		  <el-input size="small" v-model="form.productName" placeholder="产品名称" clearable></el-input>
		</el-form-item>
		<el-form-item>
		  <el-button type="primary" color="#427CFF"  :icon="'el-icon-plus'">新增</el-button>
		  <el-button plain round type="warning"  color="#427CFF" :icon="'el-icon-download'">导出</el-button>
		</el-form-item>
	  </el-form>
	  <el-row :gutter="20">
		<el-col :span="4" style="padding-top:20px">
		  <img width="200px"
			src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F2c%2F81%2F85%2F2c8185c42a4d5309f8f62eaf3b733bfc.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668668919&t=2c991aa3bd0c368c8ac31fb357220d8f" />
		</el-col>
		<el-col :span="6">
		  <el-form ref="form" :model="form" label-width="80px">
			<h3 style="padding-left: 10px;">
			  Apple无线蓝牙耳机 Apple耳机充电盒子
			</h3>
			<el-form-item label="商品编号">
			  <span>1000568566</span>
			</el-form-item>
			<el-form-item label="生产批次">
			  <span>M20200001</span>
			</el-form-item>
			<el-form-item label="出厂时间">
			  <span>2022年12月20日</span>
			</el-form-item>
			<el-form-item label="生产厂家">
			  <span>某某设备制造有限公司</span>
			</el-form-item>
			<el-form-item label="商品净重">
			  <span>180g</span>
			</el-form-item>
			<el-form-item label="计划单号">
			  <span>J2022100007</span>
			</el-form-item>
			<el-form-item label="质保时长">
			  <span>1年</span>
			</el-form-item>
			<el-form-item label="使用材料">
			  <span>塑胶</span>
			</el-form-item>
		  </el-form>
		</el-col>
		<!--中间线条隔开-->
		<el-col :span="1" class="row-divider">
		  <el-divider direction="vertical" content-position="center"></el-divider>
		</el-col>
		<el-col :span="13">
		  <div class="clearfix">
			<div class="vertical-line" />
			<h3 style="display: inline-block;">销售流程</h3>
		  </div>
		  <div style="padding-left:250px">
			<el-timeline>
			  <el-timeline-item v-for="(item, index) in steps" :key="index" :icon="item.icon" :type="item.type"
				size="large" :class="item.linecss">
				<!-- 时间线右侧 ，奇数时显示-->
				<div v-if="index % 2 != 0">
				  <div class="odd" style="height:100px">
					<strong>{{ item.title }}</strong>
					<div role="tooltip" class="el-popover el-popper" v-if="item.status == 1"
					  style="width: 290px;position: absolute; left: -260px; " x-placement="bottom-end">
					  <el-row>
						<el-col :span="5">
						  <a class="btn-detail">详情</a>
						</el-col>
						<el-col :span="19">
						  <b>{{item.content1 }}</b>
						  <span class="text">{{ item.content2 }}</span>
						</el-col>
					  </el-row>
					  <div x-arrow="" class="popper__arrow" style="left: 267px;"></div>
					</div>
					<el-tag v-if="item.status == 2">进行中</el-tag>
					<el-tag type="info" v-else-if="item.status == 3">
					  未开始
					</el-tag>
				  </div>
				  <!-- 必须要设置空的div，否则会导致两个圆心距离很近 -->
				  <div style="height:100px"></div>
				</div>
  
				<div v-else>
				  <div class="odd" style="height:100px"></div>
				   <!-- 时间线左侧 偶数时显示 -->
				   <!-- 必须要设置空的div，否则会导致两个圆心距离很近 -->
				  <div style="height:100px">
					<strong>{{ item.title }}</strong>
					<div role="tooltip" v-if="item.status == 1" class="el-popover el-popper"
					  style="width: 290px; position: absolute; left: 30px;" x-placement="bottom-start">
					  <el-row>
						<el-col :span="19">
						  <b>{{item.content1 }}</b>
						  <span class="text">{{ item.content2 }}</span>
						</el-col>
						<el-col :span="5">
						  <a class="btn-detail">详情</a>
						</el-col>
					  </el-row>
					  <div x-arrow="" class="popper__arrow" style="left: 8px;"></div>
					</div>
					<el-tag v-if="item.status == 2">进行中</el-tag>
					<el-tag type="info" v-else-if="item.status == 3">
					  未开始
					</el-tag>
				  </div>
				</div>
			  </el-timeline-item>
			</el-timeline>
		  </div>
		</el-col>
	  </el-row>
	</div>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		form: {},
		steps: [
		  {
			title: "计划",
			content1: "计划编号：JH193892492",
			content2: "执行人:张三 2022-10-18 16:34:23",
			status: "1", //1已完成，2进行中，3未开始
			type: "primary",
			icon: "el-icon-check",
			linecss: "line1"
		  },
  
		  {
			title: "出库",
			content1: "出库单号：WO2022100007",
			content2: "出库人：张元",
			status: "1", //1已完成，2进行中，3未开始
			type: "primary",
			icon: "el-icon-check",
			linecss: "line1"
		  },
  
		  {
			title: "进店",
			content1: "进店单号：T348934",
			content2: "进店时间：2022年12月21日",
			status: "1", //1已完成，2进行中，3未开始
			type: "primary",
			icon: "el-icon-check",
			linecss: "line2"
		  },
		  {
			title: "上架",
			content1: null,
			content2: null,
			status: "2", //1已完成，2进行中，3未开始
			type: "warning",
			icon: "el-icon-minus",
			linecss: "line3"
		  },
		  {
			title: "定期检查",
			content1: null,
			content2: null,
			status: "3", //1已完成，2进行中，3未开始
			type: "info",
			icon: "el-icon-close",
			linecss: "line3"
		  },
		  {
			title: "盘点",
			content1: null,
			content2: null,
			status: "3", //1已完成，2进行中，3未开始
			type: "info",
			icon: "el-icon-close",
			linecss: "line3"
		  },
		  {
			title: "登记",
			content1: null,
			content2: null,
			status: "3", //1已完成，2进行中，3未开始
			type: "info",
			icon: "el-icon-close",
			linecss: "line3"
		  },
		  {
			title: "出售",
			content1: null,
			content2: null,
			status: "3", //1已完成，2进行中，3未开始
			type: "info",
			icon: "el-icon-close",
			linecss: "line3"
		  }
		]
	  };
	},
	methods: {}
  };
  </script>
  <style scoped>
  .vertical-line {
	background: #409eff;
	width: 3px;
	height: 15px;
	display: inline-block;
	margin-right: 5px;
  }
  
  .odd {
	position: absolute;
	left: -50px;
	top: 1px;
  }
  
  .odd .el-tag {
	left: -100px;
	position: relative;
  }
  
  .el-timeline-item {
	padding-bottom: 1px !important;
  }
  
  .el-timeline-item__node--normal {
	width: 7px;
	height: 7px;
	left: 2px;
  }
  
  >>>.el-timeline-item__node {
	/* border: 2px solid hsla(0, 0%, 90%, 0.7);
	background-clip: content-box;
	background: rgba(78, 151, 255, 1); */
	height: 20px;
	width: 20px;
	margin-left: -4px;
  }
  
  >>>.el-timeline-item__tail {
	border-left: 4px solid #dfe4ed;
	left: 2px;
  }
  
  >>>.line1 .el-timeline-item__tail {
	border-left: 4px solid #1890ff;
  }
  
  >>>.line2 .el-timeline-item__tail {
	border-left: 4px solid #ffba00;
  }
  </style>
  <style lang="scss">
  .el-popper {
	z-index: 0 !important;
  
	.btn-detail {
	  border: 1px solid #1890ff;
	  padding: 2px 8px;
	  border-radius: 6px;
	  font-size: 13px;
	  color: #1890ff;
	}
  
	.text {
	  display: block;
	}
  
	.el-col-5 {
	  font-weight: 500;
	  line-height: 250%;
	}
  }
  
  .el-popover[x-placement^=bottom] .popper__arrow {
	/*el-popover上边三角下层的颜色---也就是视觉上的边框*/
	border-bottom-color: rgb(198, 204, 206);
  }
  
  .el-popover[x-placement^=bottom] .popper__arrow::after {
	/*el-popover上边三角表层的颜色---也就是视觉上的角*/
	border-bottom-color: white;
  }
  
  .el-divider--vertical {
	height: 100%;
	background-color: #eff1f8;
  }
  
  .row-divider {
	height: 600px;
  }
  .clearfix{
	margin-left: -20px;
  }
  </style>
  